<!--
 * @Author: your name
 * @Date: 2022-03-30 20:48:41
 * @LastEditTime: 2022-03-30 21:18:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \edu-web\src\views\Laboratory.vue
-->
<template>
  <div class="laboratory">
    <sub-header pathName="/laboratory" :tab="1"> </sub-header>
    <div class="wrap">
      <el-form
        class="meet-form"
        :label-position="labelPosition"
        label-width="150px"
      >
        <el-form-item class="meet-item" :label="$t('select_laboratory')">
          <el-select v-model="roomVal" :placeholder="$t('select_laboratory')">
            <el-option
              v-for="item in roomList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="meet-item" :label="$t('select_date')">
          <el-date-picker
            v-model="dateVal"
            type="date"
            :placeholder="$t('select_date')"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="meet-item" :label="$t('select_stime')">
          <el-time-select
            :placeholder="$t('select_stime')"
            v-model="startTime"
            :picker-options="{
              start: '00:00',
              step: '00:10',
              end: '24:00',
            }"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item class="meet-item" :label="$t('select_etime')">
          <el-time-select
            :placeholder="$t('select_etime')"
            v-model="endTime"
            :picker-options="{
              start: '00:00',
              step: '00:10',
              end: '24:00',
              minTime: startTime,
            }"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item class="meet-item" :label="$t('select_username')">
          <el-input
            v-model="userName"
            :placeholder="$t('select_username')"
          ></el-input>
        </el-form-item>
        <el-form-item class="meet-item" :label="$t('select_phone')">
          <el-input
            type="tel"
            v-model="phone"
            :placeholder="$t('select_phone')"
            maxlength="13"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button
        class="save"
        :disabled="!isShowBtn"
        type="primary"
        @click="sumitSave"
        >{{ $t("submit_save") }}</el-button
      >
    </div>
  </div>
</template>
<script>
import SubHeader from '@/components/subHeader/subHeader.vue'
import { getRoomList, goAppointment } from '@/service/getData.js'
import moment from "moment";

import { toastErrMessage, isPhone } from '@/common/util.js'

export default {
  components: {
    'sub-header': SubHeader,
  },
  data() {
    return {
      labelPosition: 'left',
      roomList: [],
      roomVal: '',
      dateVal: '',
      startTime: '',
      endTime: '',
      userName: '',
      phone: ''

    }
  },
  created() {
    this.getRoom()
  },
  computed: {
    isShowBtn() {
      return this.roomVal && this.dateVal && this.startTime && this.endTime && this.userName && this.phone
    }
  },
  methods: {
    async getRoom() {
      let result = await getRoomList()
      if (result && result.length > 0) {
        this.roomList = result
      }
    },
    async sumitSave() {
      if (!this.roomVal) {
        toastErrMessage(this.$t('select_laboratory'))
        return
      }
      if (!this.dateVal) {
        toastErrMessage(this.$t('select_date'))
        return
      }
      if (!this.startTime) {
        toastErrMessage(this.$t('select_stime'))
        return
      }
      if (!this.endTime) {
        toastErrMessage(this.$t('select_etime'))
        return
      }
      if (!this.userName) {
        toastErrMessage(this.$t('select_username'))
        return
      }
      if (!this.phone && isPhone(this.phone)) {
        toastErrMessage(this.$t('select_phone'))
        return
      }
      let date = moment(this.dateVal).format("YYYY-MM-DD");
      let stime = date + ' ' + this.startTime + ":00";
      let etime = date + ' ' + this.endTime + ":00";
      await goAppointment(stime, etime, this.roomVal, this.userName, this.phone)

    }
  }
}
</script>
<style lang="scss" scoped>
.laboratory {
  min-height: 600px;
}
.wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.meet-item {
  margin-top: 30px;
}
.save {
  margin: 50px 0;
}
</style>